<template>
  <view class="h-full" style="background: #f6f7fb">
    <!-- <uv-navbar title="员工信息" :autoBack="true" :placeholder="true" ></uv-navbar> -->
    <div style="height: 50rpx; background: #fff"></div>
    <div class="header">
      <div class="back center" @click="back">
        <image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
      </div>
      {{$t('员工信息')}}
    </div>
    <view class="emlp_head">
      <view class="name"> {{$t('头像')}} </view>
      <image
        class="ico_ph"
        v-if="!data.attachment"
        src="/static/img/ph_head.png"
        mode="aspectFill"
      ></image>
      <image
        class="ico_ph"
        v-if="data.attachment"
        :src="data.attachment.path"
        mode="aspectFill"
      >
      </image>
    </view>

    <view class="emlp_info">
      <view class="item">
        <view class="name"> {{$t('姓名')}} </view>
        <view class="text">
          <text v-if="lang == 'zh'">{{ data.title || "" }}</text>
          <text v-if="lang == 'ru'">{{ data.title_ru || "" }}</text>
        </view>
      </view>
      <view class="item">
        <view class="name"> {{$t('手机号')}} </view>
        <view class="text">
          <text>{{ data.phone || "" }}</text>
        </view>
      </view>
      <view class="item">
        <view class="name"> {{$t('员工身份')}} </view>
        <view class="text">
          <text v-if="lang == 'zh'">{{ get(data, "type_info.title") }}</text>
          <text v-if="lang == 'ru'">{{ get(data, "type_info.title_ru") }}</text>
        </view>
      </view>
      <view class="item">
        <view class="name"> {{$t('密码')}} </view>
        <view class="text password_eye">
          <view class="pdw" style="margin-top: 8rpx" v-if="!isEye"
            >********</view
          >
          <view class="pdw" v-if="isEye">{{ data.password }}</view>
          <view v-if="showIsEye">
            <uv-icon
              v-if="isEye"
              @click="isEye = !isEye"
              name="eye-fill"
              color="#278AFF"
              size="40rpx"
            ></uv-icon>
            <uv-icon
              v-if="!isEye"
              @click="isEye = !isEye"
              name="eye-off"
              color="#278AFF"
              size="40rpx"
            ></uv-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 老板 -->
    <template v-if="data.bind_user_id == uesrIxxx">
      <view
        class="center mt-30"
        @click="deleteEmployee"
      >
        <div class="text-red">{{$t('删除员工')}}</div>
      </view>

      <view class="footer_none"></view>
      <view class="footer_btn2">
        <view class="btn2" @click="edit(data)"> {{$t('信息修改')}} </view>
        <view class="btn" @click="callPhone(data)"> {{$t('联系员工')}} </view>
      </view>
    </template>
    <template v-else> 
      <!-- 员工 -->
      <view class="footer_none"></view>
      <view class="footer_btn2">
        <view class="btn" @click="callPhone(data)"> {{$t('联系员工')}} </view>
      </view>
    </template>


  </view>
</template>

<script>
import { deleteEmployee } from "@/api/publish";
import { request_minute } from "@/api/basic";
export default {
  computed: {
    showIsEye() {
      const userId = uni.getStorageSync("user_id");
      return this.data.register_id == userId;
    },
  },
  data() {
    return {
      data: {},
      isEye: false,
      lang: "zh",
      IMAGE_URL: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/",
      uesrIxxx: uni.getStorageSync("user_id"),
    };
  },
  onLoad(options) {
    var that = this;
    this.lang = uni.getStorageSync("lang");
    if (options.json) {
      that.data = JSON.parse(options.json);
      console.log(that.data, "1111111111");
    }
  },
  methods: {
    deleteEmployee() {
      uni.showModal({
        title: this.$t('提示'),
        content: "确定删除该员工吗？",
        success: async (res) => {
          if (res.confirm) {
            const res = await deleteEmployee({
              id: this.data.id,
            });
            if (res.data.code == 200) {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
            this.toast(res.data.message);
          }
        },
      });
    },
    back() {
      // uni.navigateBack()
      this.cback();
    },
    callPhone(data) {
      if (uni.getStorageSync("user_id") == data.user_id) {
        uni.showToast({
          title: this.$t('不能给自己打电话'),
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: data.user_id,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: data.user_id,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.$u.toast("积分不足，请充值积分");
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
              });
            }, 500);
          }
        });
      }
    },
    edit(data) {
      uni.navigateTo({
        url: "/pages/employeeAdd/employeeAdd?item=" + JSON.stringify(data),
      });
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-top: var(--status-bar-height);
  background: #fff;
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 18rpx;
}

.emlp_info {
  margin: 20rpx 24rpx 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 10rpx 0;

  .password_eye {
    display: flex;
    align-items: center;

    .pdw {
      font-size: 28rpx;
      line-height: 30rpx;
      font-weight: bold;
      padding-right: 10rpx;
    }
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    padding: 0 24rpx;

    .name {
      flex-shrink: 0;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #535353;
      margin-right: auto;
    }

    .text {
      font-size: 28rpx;
      line-height: 30rpx;
      font-weight: bold;
      padding-right: 10rpx;
    }
  }
}

.emlp_head {
  margin: 20rpx 24rpx 0;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;

  .name {
    flex-shrink: 0;
    font-size: 28rpx;
    font-weight: bold;
    margin-right: auto;
  }

  .ico_ph {
    width: 90rpx;
    height: 90rpx;
    border-radius: 20rpx;
    margin-right: 10rpx;
  }
}

.navbar_right {
  color: #278aff;
  font-size: 24rpx;
  line-height: 40rpx;
}

.footer_none {
  width: 100%;
  height: 210rpx;
}

.footer_btn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.footer_btn1 {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 0 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

  .btn_red {
    width: 100%;
    height: 110rpx;
    background: #ffb6b6;
    color: #ff1f1f;
    text-align: center;
    line-height: 110rpx;
    font-size: 32rpx;
  }

  .btn_gray {
    width: 100%;
    height: 110rpx;
    background: #c6c6c6;
    color: #fff;
    text-align: center;
    line-height: 110rpx;
    font-size: 32rpx;
  }
}

.footer_big_btn2 {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 0 0 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn_red {
    flex-shrink: 0;
    width: 240rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    color: #fff;
    background: #ff6456;
    font-size: 32rpx;
  }

  .btn_yellow {
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #ff811e 0%, #ffbe7c 100%);
    font-size: 32rpx;
  }
}

.footer_btn2 {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }

  .btn1 {
    width: 48%;
    height: 90rpx;
    border-radius: 50rpx;
    background: #fff;
    color: #8c8c8c;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    border: 1rpx solid #8c8c8c;
  }

  .btn2 {
    width: 48%;
    height: 90rpx;
    border-radius: 50rpx;
    background: #f7f7f7;
    color: #8c8c8c;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
  }
}
</style>
